<template>
	<div class="nav-bar-container">
		<el-row :gutter="15">
			<el-col :xs="5" :sm="12" :md="12" :lg="12" :xl="12">
				<div class="left-panel" @click="handleCollapse">
					<i :class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" :title="collapse ? lan.open : lan.hide"
						class="fold-unfold"></i>
					<vab-breadcrumb class="hidden-xs-only" />
				</div>
			</el-col>
			<el-col :xs="19" :sm="12" :md="12" :lg="12" :xl="12">
				<div class="right-panel">
					<vab-error-log />
					<vab-full-screen-bar v-if="device!='mobile'" @refresh="refreshRoute" />
					<language></language>
					<vab-theme-bar class="hidden-xs-only" />
					<vab-remix-icon icon="refresh-line" :title="lan.reload" @click="refreshRoute" class="topIco" />
					<vab-avatar />
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import VabErrorLog from "@/pages/common/zxlayout/VabErrorLog.vue";
	import VabFullScreenBar from "@/pages/common/zxlayout/VabFullScreenBar.vue";
	import VabThemeBar from "@/pages/common/mainpartial/VabThemeBar.vue";
	import VabBreadcrumb from "@/pages/common/mainpartial/VabBreadcrumb.vue";
	import VabAvatar from "@/pages/common/mainpartial/VabAvatar.vue";
	import common from "@/common/common.js";
	import language from "@/common/language/language.vue"

	export default {
		name: "VabNavBar",
		components: {
			VabErrorLog,
			VabFullScreenBar,
			VabThemeBar,
			VabBreadcrumb,
			VabAvatar,
			language
		},
		data() {
			return {
				pulse: false,
			};
		},
		computed: {
			collapse() {
				return this.$store.state.settings.collapse;
			},
			visitedRoutes() {
				return this.$store.state.tabsBar.visitedRoutes;
			},
			device() {
				return this.$store.state.settings.device;
			},
			routes() {
				return this.$store.state.settings.device;
			},
			lan() {
				var lang = this.$store.state.language;
				var path = "VabNavBar";
				var r = lang[path];
				if (r == null) return {};
				return r;
			}
		},
		methods: {
			handleCollapse() {
				this.$store.dispatch("changeCollapse");
			},
			async refreshRoute() {
				common.getApp().$emit("reload-router-view");
				this.pulse = true;
				setTimeout(() => {
					this.pulse = false;
				}, 1000);
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/css/variables.scss";

	.nav-bar-container {
		position: relative;
		height: $base-nav-bar-height;
		padding-right: $base-padding;
		padding-left: $base-padding;
		overflow: hidden;
		user-select: none;
		background: $base-color-white;
		box-shadow: $base-box-shadow;

		.left-panel {
			display: flex;
			align-items: center;
			justify-items: center;
			height: $base-nav-bar-height;

			.fold-unfold {
				color: $base-color-gray;
				cursor: pointer;
			}

			::v-deep {
				.breadcrumb-container {
					margin-left: 10px;
				}
			}
		}

		.right-panel {
			display: flex;
			align-content: center;
			align-items: center;
			justify-content: flex-end;
			height: $base-nav-bar-height;

			::v-deep {
				svg {
					width: 1em;
					height: 1em;
					margin-right: 15px;
					font-size: $base-font-size-small;
					color: $base-color-gray;
					cursor: pointer;
					fill: $base-color-gray;
				}

				button {
					svg {
						margin-right: 0;
						color: $base-color-white;
						cursor: pointer;
						fill: $base-color-white;
					}
				}

				.el-badge {
					margin-right: 15px;
				}
			}
		}
	}
</style>
